import { Dropdown,Menu,Space,Divider} from 'antd';
import React, { useState } from 'react';
import {
  MenuFoldOutlined,MenuUnfoldOutlined,
  FullscreenOutlined,FullscreenExitOutlined,
  SettingOutlined,PoweroffOutlined,
  DownOutlined,
} from '@ant-design/icons'
import { useNavigate} from 'react-router-dom'
import {clearUserInfo} from '@/redux/actions'
import store from '@/redux/store.js'
import './index.less'

function Header(props) {
  const navigate = useNavigate();
  const [isFullscreen, setIsFullscreen] = useState(false);
  const toggleFullscreen = () => {
    if (!isFullscreen) {
      // 进入全屏模式
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.requestFullscreen) {
        // Firefox
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.requestFullscreen) {
        // Chrome, Safari and Opera
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.requestFullscreen) {
        // IE/Edge
        document.documentElement.requestFullscreen();
      }
    }else{
      document.exitFullscreen();
    }
    setIsFullscreen(!isFullscreen);
  };
  // let menu = (
  //   <Menu>
  //     <Menu.Item key="2" >
  //       <Space><SettingOutlined />修改密码</Space>
  //     </Menu.Item>
  //     <Divider dashed={false} />
  //     <Menu.Item key="3">
  //       <Space><PoweroffOutlined />退出登录</Space>
  //     </Menu.Item>
  //   </Menu>
  // );
  const items =  [
    {
      label: '退出登录',
      key: 'loginOut',
      icon: <PoweroffOutlined />,
    },
    // {
    //   label: '修改密码',
    //   key: 'modifyPassWord',
    //   icon: <SettingOutlined />,
    // },
  ];
  const handleMenuClick = (data)=>{
    if(data.key == 'loginOut'){
      store.dispatch(clearUserInfo('{}'))
      navigate('/login')
    }else if(data.key == 'modifyPassWord'){

    }
  }

  return (
    <div className="main-header">
      <div className='collapsed-area' onClick={()=>{props.changeCollapsed(!props.collapsed)}}>
        {
          props.collapsed?<MenuUnfoldOutlined/>:<MenuFoldOutlined/>
        }
      </div>
      <div className='opration-area'>
        <div onClick={()=>{toggleFullscreen(!isFullscreen)}}>
          {
            isFullscreen?<FullscreenOutlined/>:<FullscreenExitOutlined/>
          }
        </div>
        <div>
          <Dropdown menu={{ items, onClick:handleMenuClick }}>
            <div className="pre-userAvatar">
              <div className="userAvatar"></div>
              <span>admin</span>
              <DownOutlined className="downIcon"/>
            </div>
          </Dropdown>
        </div>
      </div>
    </div>
  );
}

export default Header;
